<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<meta charset="utf-8">
<head th:include="include :: header"></head>
<style>
    .fixed-table-toolbar {
        width: 100%;
        height: 35px;
    }

    .fixed-table-toolbar .toolbar-left {
        width: calc(100% - 100px);
        float: left;
    }


    .fixed-table-toolbar .toolbar-left:focus {
        border: 1px solid #0a6aa1;
    }


    .fixed-table-toolbar .toolbar-right {
        width: 100px;
        float: right;
        background-color: #18a689;
        border-radius: 0;
    }

    #list {
        margin-top: 10px;
        list-style: none;
        padding: 0;
        margin: 5px 0;
    }

    #list li {
        display: block;
        padding: 8px;
        margin-top: 5px;
        background-color: #ffffff;
        cursor: pointer;
    }

    #list li:hover {
        color: #929292;
    }

    .load-more {
        background: #ffffff;
        cursor: pointer;
        padding: 8px;
    }


</style>
<body class="gray-bg">
<div class="wrapper wrapper-content ">
    <div class="col-sm-12">
        <div class="ibox">
            <div class="ibox-body">
                <div>
                    <div class="fixed-table-toolbar">
                        <input id="searchKey" type="text" class="form-control toolbar-left" placeholder="产品名称">
                        <button id="search" class="btn btn-primary toolbar-right">查询</button>
                    </div>
                </div>
                <ul id="list"></ul>
                <div class="text-center load-more">
                    <span>加载更多...</span>
                </div>
            </div>
        </div>
    </div>
</div>

<div th:include="include :: footer"></div>
<script type="text/javascript">
    (function () {
        var pageNum = 1;
        loadData(true);
        $(".load-more").click(function () {
            loadData(false)
        });

        $("#search").click(function () {
            loadData(true);
        });

        function loadData(refresh) {
            if (refresh) {
                pageNum = 1;
                $("#list").empty();
            }

            $.ajax({
                url: getProjectName()+"/product/list",
                type: "GET",
                dataType: "JSON",
                data: {
                    pageNumber: pageNum,
                    pageSize: 50,
                    searchKey: $("#searchKey").val()
                },
                success: function (result) {
                    if (result.code != 0) {
                        layer.alert(result.msg);
                        return;
                    }
                    buildList(result.data.records);
                },
                error: function (result) {
                    layer.alert("网络链接失败，请稍后重新操作");
                }
            })
        }

        function buildList(datas) {
            if (!datas) {
                return;
            }

            if (datas.length == 0) {
                layer.msg("没有更多数据了");
                return;
            }

            pageNum = pageNum + 1;

            for (var index in  datas) {
                var data = datas[index];
                $("#list").append('<li id="' + data.productId + '">' + data.productName + '</li>');
            }
        }

        $(document).on("click", "#list li", function () {
            parent.productCallback({
                productId: $(this).attr("id"),
                productName: $(this).text()
            });
        });

    })();
</script>
</body>
</html>